<template>
  <div>
      <!-- label 扩大点击范围 点击文字也可以选中 用户体验感更好 -->
   <label> <input type="checkbox" value="科幻" v-model="arr">科幻</label>
   <label > <input type="checkbox" value="喜剧" v-model="arr">喜剧</label>
   <label> <input type="checkbox" value="动漫"  v-model="arr">动漫</label>
    <label ><input type="checkbox" value="冒险" v-model="arr">冒险</label>
    <label ><input type="checkbox" value="科技" v-model="arr">科技</label>
    <label > <input type="checkbox" value="娱乐" v-model="arr">娱乐</label>
    <label><input type="checkbox" value="奇闻"  v-model="arr">奇闻</label>
    
    <ul>
        <!-- itme是数组中的值 index是值对应的索引 -->
      <li v-for="(itme,index) in arr" :key="index">{{itme}}</li>
  </ul>
  </div>
  
</template>

<script>
export default {
data () {
    return {
        arr:[]
    }
},
methods: {
  
}
}
</script>

<style>

</style>